@mixin  border-1px( $color, $radius) {
  position:  relative ;
  &::after {
    content: '';
    display:  block ;
    position:  absolute ;
    left:  0 ;
    top:  0 ;
    width: 100%;
    height: 100%;
    border-radius: $radius;
    border: 1px solid $color ;
    transform-origin: 0 0;
  }
}
@mixin  border-t-1px( $color) {
  position:  relative ;
  &::before {
    content: '';
    display:  block ;
    position:  absolute ;
    left:  0 ;
    top:  0 ;
    width:  100% ;
    border-top:  1px solid $color ;
  }
}
@mixin  border-b-1px( $color) {
  position:  relative ;
  &::after {
    content: ' ';
    display:  block ;
    position:  absolute ;
    left:  0 ;
    bottom:  0 ;
    width: 100% ;
    border-top:  1px solid $color;
  }
}

@media( -webkit-min-device-pixel-ratio: 1.5) , ( min-device-pixel-ratio: 1.5) {
  .border-t-1px {
    &::before {
      -webkit-transform: scaleY( 0.7);
      transform: scaleY( 0.7);
    }
  }
}
  
@media( -webkit-min-device-pixel-ratio: 2) , ( min-device-pixel-ratio: 2) {
  .border-t-1px {
    &::before {
      -webkit-transform: scaleY( 0.5);
      transform: scaleY( 0.5);
    }
  }
}
  
@media( -webkit-min-device-pixel-ratio: 2.5) , ( min-device-pixel-ratio: 2.5) {
  .border-t-1px {
    &::before {
      -webkit-transform: scaleY( 0.33333334);
      transform: scaleY( 0.33333334);
    }
  }
  .border-1px {
    &::after {
      -webkit-transform: scaleY( 0.33333334);
      transform: scaleY( 0.33333334);
    }
  }
}
  
@media( -webkit-min-device-pixel-ratio: 1.5) , ( min-device-pixel-ratio: 1.5) {
  .border-b-1px {
    &::after {
      -webkit-transform: scaleY( 0.7);
      transform: scaleY( 0.7) ;
    }
  }
  .border-1px {
    &::after {
      -webkit-transform: scaleY( .7);
      transform: scaleY( .7) ;
    }
  }
}
  
@media( -webkit-min-device-pixel-ratio: 2) , ( min-device-pixel-ratio: 2) {
  .border-b-1px {
    &::after {
      -webkit-transform: scaleY( 0.5);
      transform: scaleY( 0.5);
    }
  }
  .border-1px {
    &::after {
      -webkit-transform: scaleY( .5);
      transform: scaleY( .5);
    }
  }
}
  
@media( -webkit-min-device-pixel-ratio: 2.5) , ( min-device-pixel-ratio: 2.5) {
  .border-b-1px {
    &::after {
      -webkit-transform: scaleY( 0.33333334);
      transform: scaleY( 0.33333334);
    }
  }
}